import React, { useEffect, useState } from 'react';
import { Select } from 'antd';
import styled from 'styled-components';
import { isOnDemoEnv } from '@biz/index';
const Option = Select.Option;
//Record<K extends string | number | symbol, T>

const map = {
    1: '/login',
    2: '/loginUpDown',
    3: '/loginLeftRight',
};
const LoginTypes = (props: { style?: Record<string, any> }) => {
    const [curLoginType, setCurLoginType] = useState('1');
    const handleChange = (value) => {
        //如果目标地址存在，跳往目标地址
        if (value) {
            location.hash = map[value].slice(1);
            setCurLoginType(value);
        }
    };

    useEffect(() => {
        //112
        let initValue = '1';
        const curPageHash = window.location.hash;
        const mapEntries = Object.entries(map);
        const targetItem = mapEntries.find((item) => {
            return curPageHash == item[1];
        });
        if (targetItem) {
            //取targetItem key的值
            initValue = targetItem[0];
        }
        console.log(`curLoginType = ${curLoginType}`);
        if (curLoginType !== initValue) {
            setCurLoginType(initValue);
        }
    }, []);

    return (
        <LoginTypeTag style={props.style || {}}>
            {isOnDemoEnv() ? (
                <Select value={curLoginType} style={{ width: 250, textAlign: 'left' }} onChange={handleChange}>
                    <Option value="1">默认登录(星空蓝左右布局)</Option>
                    <Option value="2">青蓝色上下布局登录</Option>
                    <Option value="3">青蓝色左右布局登录</Option>
                </Select>
            ) : null}
        </LoginTypeTag>
    );
};

const LoginTypeTag = styled.div`
    position: absolute;
    top: 15px;
    opacity: 0.6;
`;

export default LoginTypes;
